<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="我的卡券" />
        <view
            class="wrap-order-status flex"
            :style="'top:' + navigationHeight + 'px;'"
        >
            <block v-for="(item, index) in tab_list" :key="index">
                <view
                    class="status-item flex align-center just-center"
                    @click="onTab(index)"
                >
                    <view :class="{ active: item.status === status }">
                        {{ item.title }}
                    </view>
                </view>
            </block>
        </view>

        <view class="content">
            <view
                class="card item"
                v-for="(item, index) in list"
                :key="index"
                @click.stop="showDetail(index)"
            >
                <text
                    class="subTab f-28"
                    :class="
                        item.status == 1
                            ? 'usedBg'
                            : item.status == 2
                            ? 'expiredBg'
                            : 'unUsedBg'
                    "
                >
                    {{ item.name }}
                </text>
                <view class="inner">
                    <view class="price">
                        <text class="couponsPrice f-36">{{
                            item.money || 0
                        }}</text>
                        <text class="f-28 tip" v-if="item.limit_money">
                            满{{ item.limit_money || 0 }} 可用
                        </text>
                        <text class="f-28 tip" v-else> 无门槛 </text>
                    </view>
                    <view class="quantity">
                        <text class="f-28 title">数量：</text>
                        <text class="f-28 number">x{{ item.num || 0 }}</text>
                    </view>
                    <view class="expiration_date">
                        <text class="f-28 title">有效期：</text>
                        <text class="f-28 number">
                            {{ item.expiration_time }}
                        </text>
                    </view>
                    <view class="onDetail flex align-center just-between">
                        <text class="f-28 title">查看详情</text>
                        <view class="f-28 icon">
                            <image
                                :class="
                                    index == showIndex
                                        ? 'arrow_up'
                                        : 'arrow_down'
                                "
                                src="/static/static/technician/mine/arrow_down.png"
                            />
                        </view>
                    </view>
                    <view class="detail" v-show="index == showIndex">
                        <rich-text
                            class="rich"
                            :nodes="'使用规则：' + (item.coupons.use_rul || '')"
                        ></rich-text>
                        <view class="none"></view>
                        <rich-text
                            class="rich"
                            :nodes="'限用服务：' + (item.service_name || '')"
                        ></rich-text>
                    </view>
                    <view
                        class="btn f-24"
                        v-if="item.status == 0 || item.status == 2"
                        :class="item.status == 0 ? 'use' : 'used'"
                        @click.stop="onBtn(item)"
                    >
                        {{ item.status == 0 ? "去使用" : "删除" }}
                    </view>
                </view>
            </view>

            <uEmpty v-if="list.length == 0"></uEmpty>
        </view>
    </div>
</template>
<script>
import { couponList, couponDelete } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            navigationHeight: this.$navigationHeight,

            tab_list: [
                {
                    title: "待使用",
                    status: 0,
                },
                {
                    title: "已使用",
                    status: 1,
                },
                {
                    title: "已过期",
                    status: 2,
                },
            ],

            status: 0,
            list: [],
            page: 1,
            showIndex: null,
        };
    },

    // 下拉刷新
    onPullDownRefresh() {
        this.page = 1;
        this.list = [];
        this.getData();
    },

    // 上拉加载
    onReachBottom() {
        if (this.list.length >= this.total) return;
        this.page++;
        this.getData();
    },

    onLoad() {
        this.getData();
    },

    methods: {
        // 点击按钮
        onBtn(item) {
            if (item.blindservice[0] && this.status == 0) {
                uni.navigateTo({
                    url:
                        "/subPages/technician/home/serviceDetail?id=" +
                        item.blindservice[0].service.id,
                });
            } else if (this.status !== 0) {
                couponDelete({ coupons_id: item.id })
                    .then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                        });
                        this.list = [];
                        this.page = 1;
                        this.getData();
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: err.msg,
                            icon: "none",
                        });
                    });
            }
        },
        onTab(index) {
            this.status = this.tab_list[index].status;
            this.showIndex = null;
            this.page = 1;
            this.list = [];
            this.getData();
        },
        getData() {
            couponList({ page: this.page, status: this.status })
                .then((res) => {
                    this.list.push(...res.data.data);
                    this.total = res.data.total;
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        showDetail(index) {
            this.showIndex = this.showIndex == index ? null : index;
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 30rpx 20rpx 50rpx 20rpx;
    box-sizing: border-box;
    .item {
        position: relative;
        color: #999;

        .subTab {
            padding: 10rpx 20rpx;
            border-top-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            position: absolute;
            left: 0;
            top: 0;
        }
        .inner {
            padding: 60rpx 20rpx 24rpx 20rpx;
            box-sizing: border-box;
            position: relative;
            .price {
                margin-bottom: 20rpx;
                .couponsPrice {
                    color: $price-color;
                }
                .couponsPrice::before {
                    content: "¥";
                    font-size: 28rpx;
                    color: $price-color;
                }
                .tip {
                    margin-left: 16rpx;
                }
            }
            .quantity,
            .expiration_date {
                margin-bottom: 20rpx;
            }
            .onDetail {
                border-top: 2rpx solid #ececec;
                padding-top: 20rpx;
                margin-right: 10rpx;
            }
        }
    }
}
.card {
    background: white;
    padding: 0 0;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
}
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    z-index: 10;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}
.arrow_down {
    width: 20rpx;
    height: 12rpx;
    transition: all 0.3s;
}
.arrow_up {
    width: 20rpx;
    height: 12rpx;
    transform: rotate(180deg);
    transition: all 0.3s;
}
p {
    margin-top: 10rpx;
    line-height: 1.4;
}
.unUsedBg {
    background: #fde4e0;
    color: #e13221;
}

.usedBg {
    background: rgba(161, 148, 215, 0.3);
    color: $theme-color;
}

.expiredBg {
    background: #e2e2e2;
    color: #666666;
}
.btn {
    width: 130rpx;
    height: 50rpx;
    position: absolute;
    z-index: 1;
    top: 60rpx;
    right: 5%;
}
.use {
    color: $theme-color;
    border: 2rpx solid $theme-color;
    border-radius: 50rpx;
    line-height: 46rpx;
    text-align: center;
}

.used {
    color: #999999;
    background: #ececec;
    border-radius: 50rpx;
    line-height: 46rpx;
    text-align: center;
}
.detail {
    margin-top: 20rpx;
}
/deep/ .none {
    height: 20rpx;
}
</style>